import { computed, ref, watchEffect, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { sumBy, forIn } from 'lodash';

import dayjs from 'dayjs';
import isoWeek from 'dayjs/plugin/isoWeek'
import customParseFormat from 'dayjs/plugin/customParseFormat';
import isBetween from 'dayjs/plugin/isBetween';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import useMappingProps from 't/common/hooks/useMappingProps';

dayjs.extend(isoWeek)

export const FilterFieldValueRange = {
  SDO: 'sdo',
  Boolean: 'boolean',
  Date: 'date',
};

export const FilterFieldDisplayType = {
  SelectHelper: 'selecthelper',
  Select: 'select',
  Tab: 'tab',
};

export const useHelpTipProps = {
  enableHelpTip: { type: Boolean, default: false },
  helpTipContext: { type: String, default: '' },
  ValueInfo_helpTipContext: { type: String, default: '' },
  helpTipPlacement: { type: String, default: 'bottom' },
};

export const useClipProps = {
  enableStatistics: { type: Boolean, default: false },
  showTotalCount: { type: Boolean, default: false },
  showSummaryCount: { type: Boolean, default: true },
  enableAllItem: { type: Boolean, default: false },
  enableFilter: { type: Boolean, default: false },
  showTitle: { type: Boolean, default: true },
  hideEmpty: { type: Boolean, default: false },
  label: { type: String, default: '' },
  isMultiple: { type: Boolean, default: false },
  isLast: { type: Boolean, default: false },
  ...useHelpTipProps,
  clips: {
    type: Array,
    default: () => {
      return [];
    },
  },
};

export const dateFilterOpts = [
  {
    label: '', value: '', getDateFilter() {
      return []
    }
  },
  {
    label: '@今天', value: '@today', getDateFilter() {
      let now = dayjs();
      return [now.startOf('day').format(), now.endOf('day').format()]
    }
  },
  {
    label: '@昨天', value: '@yesterday', getDateFilter() {
      let yesterday = dayjs().subtract(1, 'day');
      return [yesterday.startOf('day').format(), yesterday.endOf('day').format()]
    }
  },
  {
    label: '@本周', value: '@week', getDateFilter() {
      let d = dayjs();
      return [d.startOf('isoWeek').format(), d.endOf('isoWeek').format()]
    }
  },
  {
    label: '@上周', value: '@last_week', getDateFilter() {
      let d = dayjs().subtract(1, 'week');
      return [d.startOf('isoWeek').format(), d.endOf('isoWeek').format()]
    }
  },
  {
    label: '@本月', value: '@month', getDateFilter() {
      let d = dayjs();
      return [d.startOf('month').format(), d.endOf('month').format()]
    }
  },
  {
    label: '@上月', value: '@last_month', getDateFilter() {
      let d = dayjs().subtract(1, 'month');
      return [d.startOf('month').format(), d.endOf('month').format()]
    }
  },
  {
    label: '@今年', value: '@year', getDateFilter() {
      let d = dayjs();
      return [d.startOf('year').format(), d.endOf('year').format()]
    }
  },
  {
    label: '@上年', value: '@last_year', getDateFilter() {
      let d = dayjs().subtract(1, 'year');
      return [d.startOf('year').format(), d.endOf('year').format()]
    }
  },
]

export function dateFilterOptsLang(lang, allLang=false) {
  return dateFilterOpts.map(item => {
    let label = item.label;
    let value = item.value.replace('@', '');
    if (lang?.dateFilterOpts && lang?.dateFilterOpts[value]) {
      label = lang.dateFilterOpts[value];
    }
    if (allLang && label == '') {
      label = lang?.all;
    }
    return { ...item, label };
  });
}

export const dateFilterObj = dateFilterOpts.reduce((obj, item) => {
  obj[item.value] = item;
  return obj;
}, {});

export const getDateRange2Value = dataRange => {
  const allItem = dateFilterOpts[0];
  return (
    _.find(dateFilterOpts, item => {
      let dataFilter = item.getDateFilter();
      if (dataFilter.length < 2) {
        return false;
      }
      return (
        dataFilter[0] == dayjs(dataRange[0]).startOf('day').format() &&
        dataFilter[1] == dayjs(dataRange[1]).endOf('day').format()
      );
    }) || allItem
  );
};

export const getDateFilter = () => {
}

function hasClips(item) {
  if (FilterFieldDisplayType.SelectHelper === item.displayType) {
    return true;
  }
  if (item.enableStatistics && item.hideEmpty) {
    return sumBy(item.valueRange, c => c.count) > 0;
  } else {
    return item.valueRange?.length > 0;
  }
}

export const useClips = props => {
  const computedFilterItems = computed(() => {
    return props.filterItems.filter(hasClips);
  });

  return { computedFilterItems };
};


export const useClipItem = props => {
  const computedClips = computed(() => {
    return props.clips.filter(clip => {
      if (props.enableStatistics && props.hideEmpty) {
        return clip.count > 0;
      } else {
        return true;
      }
    });
  });

  return { computedClips };
};
export function setHelpTipBase(filterFields = [], opts, val = '') {
  debugger;
  if (_.isString(opts)) {
    opts = { [opts]: val };
  }
  let returnValue = {};
  forIn(opts, (val, key) => {
    let find = filterFields.find?.(f => f.fieldCode == key);
    if (find) {
      if (val) {
        if (_.isString(val)) {
          find.ValueInfo_helpTipContext = 'NO';
          find.helpTipContext = val;
        }
        find.enableHelpTip = true;
      } else {
        find.enableHelpTip = false;
      }
      returnValue[key] = find.helpTipContext;
    }
  });
  return returnValue;
}
